import 'package:aero_frisbee/app/model/af_friend_info_model/af_friend_info_model.dart';
import 'package:aero_frisbee/pages/modues/message/pages/followed/view_model/af_followed_list_view_model.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class AfFollowedListCell extends ConsumerWidget {
  const AfFollowedListCell({
    Key? key,
    required this.item,
    this.unBlockClick,
  }) : super(key: key);

  final AfFriendInfoModel item;
  final Function()? unBlockClick;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    ref.listen(unfriendServiceProvider, (previousData, newData) {
      final isOk =
          newData.maybeWhen(ready: ((data) => data), orElse: () => false);
      if (isOk) {
        ref.read(afFollowedListServiceProvider.notifier).refresh();
      }
    });
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Flexible(
            child: Row(
              children: [
                SizedBox(
                  height: 44,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(22),
                    child: AspectRatio(
                      aspectRatio: 1,
                      child: CachedNetworkImage(
                        imageUrl: item.avatarUrl ?? '',
                        fit: BoxFit.fill,
                        placeholder: (context, url) => const Material(
                          color: Color(0xffF2F5F9),
                          child: Center(
                            child: SizedBox(
                              width: 25,
                              height: 25,
                              child: CircularProgressIndicator(
                                strokeWidth: 2,
                                color: Color(0xffADADAD),
                                backgroundColor: Colors.white,
                              ),
                            ),
                          ),
                        ),
                        errorWidget: (context, url, error) =>
                            const CircularProgressIndicator(
                          strokeWidth: 2,
                          color: Color(0xffADADAD),
                          backgroundColor: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
                const SizedBox(
                  width: 10,
                ),
                Flexible(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        item.nickname ?? '',
                        style: const TextStyle(
                          color: Color(0xff000000),
                          fontWeight: FontWeight.normal,
                          fontSize: 16,
                        ),
                        textAlign: TextAlign.left,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              ref
                  .read(unfriendServiceProvider.notifier)
                  .unfriend(userId: item.userId ?? '');
            },
            child: Container(
              decoration: BoxDecoration(
                color: const Color(0xff454545),
                borderRadius: BorderRadius.circular(36),
              ),
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
              child: const Text(
                'Unfollow',
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.normal,
                  fontSize: 14,
                ),
                textAlign: TextAlign.center,
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
              ),
            ),
          )
        ],
      ),
    );
  }
}
